<template>
    <view class="content">
        <view class="u-p-b-20">
            <u-search bg-color="#fff" :show-action="false" v-model="keyword" shape="round" placeholder="请输入名称" @search="doSearch"></u-search>
        </view>
        
        <!-- 时间搜索 -->
        <!-- <view class="u-flex time">
            <view class="t-box" @click="KStimeShow = true">
                <input type="text" v-model="startTime" placeholder="开始时间" disabled />
                <image src="../../static/icons/calendar.png"></image>
            </view>
            <view class="line"></view>
            <view class="t-box" @click="JStimeShow = true">
                <input type="text" v-model="endTime" placeholder="结束时间" disabled />
                <image src="../../static/icons/calendar.png"></image>
            </view>
            <view class="search" @click="doSearch">搜索</view>
        </view> -->
        
        <view class="item" v-for="(item, index) in list" :key="index">
            <image :src="item.image || '/static/icon/avatar.png'" class="avatar"></image>
            <view class="u-flex-1">
                <view class="name">{{item.user_name}}</view>
                <view>手机号：{{item.phone}}</view>
            </view>
            <view class="btn" @click="$gTo('../hit-card/rest?id=' + item.id)">查看详情</view>
        </view>
        
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                startTime: '', //开始时间
                endTime: '', //结束时间
                timeParams: { //时间格式
                	year: true,
                	month: true,
                	day: true,
                	hour: false,
                	minute: false,
                	second: false
                },
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [], 
                keyword: '',
            };
        },
        onLoad() {
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.startTime = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 2) {
                    this.endTime = e.year + '-' + e.month + '-' + e.day;
            	}
            },
            // 搜索
            doSearch() {
                this.page = 1;
                this.list = [];
                this.status = 'loadmore';
                this.getList()
            },
            // 获取列表
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('users_manage', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    type: 3,//1人员管理 2工资管理 3考勤打卡
                    name: this.keyword,//搜索
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail.data.length > 0) {
            				this.list = this.list.concat(ret.detail.data);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        },
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .time {
        width: 100%;
        padding: 20rpx 0;
        .t-box{
            flex: 1;
            height: fit-content;
            background-color: #fff;
            position: relative;
            padding-right: 70rpx;
            border-radius: 10rpx;
            
            image{
                display: block;
                width: 38rpx;
                height: 36rpx;
                position: absolute;
                top: 50%;
                right: 22rpx;
                margin-top: -19rpx;
            }
        }
    
        input {
            width: 100%;
            height: 68rpx;
            font-size: 24rpx;
            color: #333333;
            text-indent: 25rpx;
            line-height: 68rpx;
            padding-left: 10rpx;
        }
    
        .line {
            width: 16rpx;
            height: 4rpx;
            background-color: #803906;
            margin: 0 10rpx;
        }
    
        .search {
            font-size: 24rpx;
            color: #803906;
            line-height: 68rpx;
            background-color: #ffecd2;
            // background: linear-gradient(to right , #fff2de , #f7d4a7);
            border-radius: 10rpx;
            padding: 0 48rpx;
            margin-left: 20rpx;
        }
    }
    
    
    .item{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
    }
    .avatar{
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        margin-right: 25rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        padding-bottom: 5rpx;
    }
    .btn{
        color: #fff;
        padding: 12rpx 18rpx;
        border-radius: 50rpx;
        background-color: #00a1e9;
    }
    
</style>
